<!DOCTYPE html>
<html style="height: auto; min-height: 100%;">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>form</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/static/js/plugins/bootstrap3/3.3.7/css/bootstrap.min.css">
  <link type="text/css" rel="stylesheet" href="/static/js/plugins/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/js/plugins/Ionicons/2.0.0/css/ionicons.min.css">
  <link rel="stylesheet" href="/static/js/plugins/adminlte/2.4.2/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/static/js/plugins/adminlte/2.4.2/css/skins/skin-blue.min.css" disabled>
  <link rel="stylesheet" href="/static/js/plugins/adminlte/2.4.2/css/skins/skin-blue-light.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>

<body class="hold-transition skin-blue-light" style="height: auto; min-height: 100%;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <!-- vertical-form  -->
        <div class="row">
          <div class="col-sm-12">
            <!-- box-primary box-info box-warning box-success box-danger box-solid -->
            <div class="box box-solid">
              <div class="box-header with-border">
                <h3 class="box-title">垂直表单</h3>
                <div class="box-tools pull-right">
                  <!-- Buttons, labels, and many other things can be placed here! -->
                  <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i>
                  </button>
                </div>
                <!-- /.box-tools -->
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                <form>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> Check me out
                    </label>
                  </div>
                  <div class="form-group">
                    <button class="btn btn-default">取消</button>
                    <button type="submit" class="btn btn-primary">提交</button>
                  </div>
                </form>
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                The footer of the box
              </div>
              <!-- box-footer -->
            </div>
            <!-- /.box -->
          </div>
          <!-- /.col-12 -->
        </div>
        <!-- /.row -->

        <!-- horizontal-form  -->
        <div class="row">
          <div class="col-sm-12">
            <!-- box-primary box-info box-warning box-success box-danger box-solid -->
            <div class="box box-solid">
              <div class="box-header with-border">
                <h3 class="box-title">水平表单</h3>
                <div class="box-tools pull-right">
                  <!-- Buttons, labels, and many other things can be placed here! -->
                  <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i>
                  </button>
                </div>
                <!-- /.box-tools -->
              </div>
              <!-- /.box-header -->
              <div class="box-body">

                <form role="form" class="form-horizontal">
                  <div class="form-group">
                    <label for="input1" class="control-label col-sm-4">col-sm-4</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="input1" placeholder="col-sm-4">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="input-lg" class="control-label col-sm-4">.input-lg</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control input-lg" id="input-lg" placeholder="input-lg">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="input-sm" class="control-label col-sm-4">.input-sm</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control input-sm" id="input-sm" placeholder="input-sm">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="input2" class="control-label col-sm-4">前缀</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="input2" placeholder="col-sm-4">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="input3" class="control-label col-sm-4">后缀</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <input type="text" class="form-control" id="input3" placeholder="col-sm-4">
                        <span class="input-group-addon">
                          <span class="glyphicon glyphicon-envelope"></span>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-4 control-label">静态文本</label>
                    <div class="col-sm-4">
                      <p class="form-control-static">email@example.com</p>
                    </div>
                  </div>

                  <div class="form-group has-success has-feedback">
                    <label class="control-label col-sm-4" for="inputSuccess2">Input with success</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
                      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                      <div id="inputSuccess2Status" class="help-block">(success)</div>
                    </div>
                  </div>
                  <div class="form-group has-warning has-feedback">
                    <label class="control-label col-sm-4" for="inputWarning2">Input with warning</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
                      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                      <div id="inputWarning2Status" class="help-block">(warning)</div>
                    </div>
                  </div>
                  <div class="form-group has-error has-feedback">
                    <label class="control-label col-sm-4" for="inputError2">Input with error</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
                      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                      <span id="inputError2Status" class="help-block">(error)</span>
                    </div>
                  </div>
                  <div class="form-group has-success has-feedback">
                    <label class="control-label col-sm-4" for="inputGroupSuccess1">Input group with success</label>
                    <div class="col-sm-4">
                      <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
                      </div>
                      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                      <div id="inputGroupSuccess1Status" class="help-block">(success)</div>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-4">
                      <button class="btn btn-default">取消</button>
                      <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                  </div>
                </form>

              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <div class="col-sm-3 col-sm-offset-3">
                  <p class="text-info">水平表单的form-control元素的长度使用col-sm-4</p>
                </div>
              </div>
              <!-- box-footer -->
            </div>
            <!-- /.box -->
          </div>
          <!-- /.col-12 -->
        </div>
        <!-- /.row -->

        <!-- 多列表单 -->
        <div class="row">
          <div class="col-sm-12">
            <!-- box-primary box-info box-warning box-success box-danger box-solid -->
            <div class="box box-solid">
              <div class="box-header with-border">
                <h3 class="box-title">多列表单</h3>
                <div class="box-tools pull-right">
                  <!-- Buttons, labels, and many other things can be placed here! -->
                  <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fa fa-times"></i>
                  </button>
                </div>
                <!-- /.box-tools -->
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                <div class="row">
                  <!-- 第一列 -->

                  <form role="form" class="form-horizontal">
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label for="input1" class="control-label col-sm-2">col-sm-2</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="" placeholder="col-sm-8">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="input-lg" class="control-label col-sm-2">.input-lg</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control input-lg" id="" placeholder="input-lg">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="" class="control-label col-sm-2">.input-sm</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control input-sm" id="" placeholder="input-sm">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="input2" class="control-label col-sm-2">前缀</label>
                        <div class="col-sm-8">
                          <div class="input-group">
                            <span class="input-group-addon">@</span>
                            <input type="text" class="form-control" id="" placeholder="col-sm-2">
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="input3" class="control-label col-sm-2">后缀</label>
                        <div class="col-sm-8">
                          <div class="input-group">
                            <input type="text" class="form-control" id="" placeholder="col-sm-8">
                            <span class="input-group-addon">
                              <span class="glyphicon glyphicon-envelope"></span>
                            </span>
                          </div>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">静态文本</label>
                        <div class="col-sm-8">
                          <p class="form-control-static">email@example.com</p>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="input1" class="control-label col-sm-2">col-sm-2</label>
                            <div class="col-sm-8">
                              <input type="text" class="form-control" id="" placeholder="col-sm-8">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="input-lg" class="control-label col-sm-2">.input-lg</label>
                            <div class="col-sm-8">
                              <input type="text" class="form-control input-lg" id="" placeholder="input-lg">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="" class="control-label col-sm-2">.input-sm</label>
                            <div class="col-sm-8">
                              <input type="text" class="form-control input-sm" id="" placeholder="input-sm">
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="input2" class="control-label col-sm-2">前缀</label>
                            <div class="col-sm-8">
                              <div class="input-group">
                                <span class="input-group-addon">@</span>
                                <input type="text" class="form-control" id="" placeholder="col-sm-2">
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="input3" class="control-label col-sm-2">后缀</label>
                            <div class="col-sm-8">
                              <div class="input-group">
                                <input type="text" class="form-control" id="" placeholder="col-sm-8">
                                <span class="input-group-addon">
                                  <span class="glyphicon glyphicon-envelope"></span>
                                </span>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label class="col-sm-2 control-label">静态文本</label>
                            <div class="col-sm-8">
                              <p class="form-control-static">email@example.com</p>
                            </div>
                          </div>
                    </div>
                  </form>
                </div> <!-- row -->


              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                  <div class="col-sm-4 col-sm-offset-4">
                      <div class="col-sm-6 col-sm-offset-3">
                          <button class="btn btn-default">取消</button>
                          <button type="submit" class="btn btn-primary">提交</button>
                      </div>
                  </div>
              </div>
              <!-- box-footer -->
            </div>
            <!-- /.box -->
          </div>
          <!-- /.col-12 -->
        </div>
        <!-- /.row -->

      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->

  <script src="/static/js/plugins/jquery/1.12.4/js/jquery.js"></script>
  <script src="/static/js/requirejs/js/require.js"></script>
  <script src="/static/js/initiator.js" data-base-url="/static/js" data-custom-entry="../example/form/form"></script>
  <script src="/static/js/plugins/bootstrap3/3.3.7/js/bootstrap.js"></script>
  <script src="/static/js/plugins/adminlte/2.4.2/js/adminlte.js"></script>
</body>

</html>
